import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'
import { Details } from './style'

import connect from './connect'

import Watch from '../Cartoon/Watch';


@connect
@withRouter
class World extends Component {
    componentDidMount() {
        // 发起网络请求
        this.props.getDetailCmp()

    }
    render() {

        let detail = this.props.detail ? this.props.detail.toJS() : []

        let id = this.props.match.params.id

        let newdetail = detail.filter(item => item.id == id)

        return (
            <>
                {
                    newdetail.length === 0 ? <div>加载中</div> : (
                        <Details>
                            <div className='header'>
                                <img src={newdetail[0].image_url} />
                                <div className='mask'></div>
                            </div>
                            <div className='title'>
                                <img src={newdetail[0].image_url} />
                                <div className='info'>
                                    <strong>{newdetail[0].title}</strong>
                                    <div className='author-name'>{newdetail[0].right_bottom}</div>
                                    <div className='comic-style'>类型：{newdetail[0].category[0]}{newdetail[0].category[1]}</div>
                                    <div className='comic-intro'>
                                        {newdetail[0].description}
                        </div>
                                </div>
                            </div>
                            <div className="newest-chapter">
                                <div className='newest-top'>
                                    <span>最新章节：</span>
                                    <span>243 番外篇 幻影~</span>
                                    <a href="">目录 ▶ </a>
                                </div>
                                <p className='update-time'>2018-08-03</p>
                            </div>
                            <div className='comment-content'>
                                <span>评论区：</span>
                                <a href="">写评论 ✎</a>
                            </div>
                            <div className="comment-content2">
                                <span>{newdetail[0].right_bottom}</span>
                                <span>置顶</span>
                                <p>各位亲爱的读者们，《{newdetail[0].title}》在完结以后，作品即将进入付费，谢谢大家的支持。 </p>
                            </div>
                            <div className='btn'>
                                <p onClick={this.add.bind(this,id)}>加入书架</p>
                                <p>开始阅读</p>
                            </div>
                        </Details>
                    )
                }
            </>
        )
    }
    add(id){
        window.alert('加入成功')
        this.props.getDetailCmp2(id)
    }
}
export default World
